<template>
  <div class="login-page">
    <van-nav-bar title="登录" left-arrow @click-left="$router.go(-1)" />

    <div class="login-container">
      <!-- Logo区域 -->
      <div class="logo-section">
        <div class="logo">
          <img src="/favicon.ico" alt="Logo" />
        </div>
        <h2 class="app-name">背单词</h2>
      </div>

      <!-- 登录表单 -->
      <div class="form-section">
        <van-form @submit="handleLogin">
          <!-- 手机号输入 -->
          <van-field
            v-model="loginForm.phone"
            name="phone"
            label="手机号"
            placeholder="请输入手机号"
            :rules="[{ required: true, message: '请输入手机号' }]"
            type="tel"
            maxlength="11"
          />

          <!-- 验证码输入 -->
          <van-field
            v-model="loginForm.code"
            name="code"
            label="验证码"
            placeholder="请输入验证码"
            :rules="[{ required: true, message: '请输入验证码' }]"
            maxlength="4"
          >
            <template #button>
              <div class="captcha-container" @click="refreshCaptcha">
                <canvas
                  ref="captchaCanvas"
                  width="100"
                  height="40"
                  class="captcha-canvas"
                ></canvas>
                <span class="refresh-tip">点击刷新</span>
              </div>
            </template>
          </van-field>

          <!-- 登录按钮 -->
          <div class="login-btn-container">
            <van-button
              type="primary"
              block
              size="large"
              :loading="loading"
              native-type="submit"
            >
              立即登录
            </van-button>
          </div>
        </van-form>

        <!-- 其他登录方式 -->
        <div class="other-login">
          <div class="divider">
            <span>其他登录方式</span>
          </div>
          <div class="social-login">
            <div class="social-item" @click="handleWechatLogin">
              <van-icon name="wechat" size="24" color="#07c160" />
              <span>微信登录</span>
            </div>
          </div>
        </div>

        <!-- 用户协议 -->
        <div class="agreement">
          <van-checkbox v-model="agreed" icon-size="14">
            我已阅读并同意
            <span class="link">《用户协议》</span>
            和
            <span class="link">《隐私政策》</span>
          </van-checkbox>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";

const router = useRouter();

// 表单数据
const loginForm = ref({
  phone: "",
  code: "",
});

// 页面状态
const loading = ref(false);
const agreed = ref(false);
const captchaCode = ref("");

// 验证码canvas引用
const captchaCanvas = ref(null);

// 生成随机验证码
const generateCaptcha = () => {
  const chars = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678";
  let code = "";
  for (let i = 0; i < 4; i++) {
    code += chars.charAt(Math.floor(Math.random() * chars.length));
  }
  captchaCode.value = code;
  return code;
};

// 绘制验证码
const drawCaptcha = () => {
  const canvas = captchaCanvas.value;
  if (!canvas) return;

  const ctx = canvas.getContext("2d");
  const code = generateCaptcha();

  // 清空画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 设置背景
  ctx.fillStyle = "#f0f0f0";
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  // 绘制验证码文字
  ctx.font = "20px Arial";
  ctx.textAlign = "center";
  ctx.textBaseline = "middle";

  for (let i = 0; i < code.length; i++) {
    ctx.fillStyle = `hsl(${Math.random() * 360}, 70%, 50%)`;
    ctx.save();
    ctx.translate(25 + i * 20, 20);
    ctx.rotate((Math.random() - 0.5) * 0.5);
    ctx.fillText(code[i], 0, 0);
    ctx.restore();
  }

  // 添加干扰线
  for (let i = 0; i < 3; i++) {
    ctx.strokeStyle = `hsl(${Math.random() * 360}, 70%, 50%)`;
    ctx.beginPath();
    ctx.moveTo(Math.random() * canvas.width, Math.random() * canvas.height);
    ctx.lineTo(Math.random() * canvas.width, Math.random() * canvas.height);
    ctx.stroke();
  }

  // 添加干扰点
  for (let i = 0; i < 20; i++) {
    ctx.fillStyle = `hsl(${Math.random() * 360}, 70%, 50%)`;
    ctx.beginPath();
    ctx.arc(
      Math.random() * canvas.width,
      Math.random() * canvas.height,
      1,
      0,
      2 * Math.PI
    );
    ctx.fill();
  }
};

// 刷新验证码
const refreshCaptcha = () => {
  drawCaptcha();
};

// 处理登录
const handleLogin = () => {
  if (!agreed.value) {
    showToast("请先同意用户协议");
    return;
  }

  if (loginForm.value.code.toLowerCase() !== captchaCode.value.toLowerCase()) {
    showToast("验证码错误");
    refreshCaptcha();
    return;
  }

  loading.value = true;

  // 模拟登录请求
  setTimeout(() => {
    loading.value = false;
    showSuccessToast("登录成功");
    router.replace("/my");
  }, 1500);
};

// 微信登录
const handleWechatLogin = () => {
  if (!agreed.value) {
    showToast("请先同意用户协议");
    return;
  }
  console.log("微信登录");
};

onMounted(() => {
  drawCaptcha();
});
</script>

<style scoped lang="scss">
.login-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.login-container {
  padding: 40px 20px;
}

.logo-section {
  text-align: center;
  margin-bottom: 60px;

  .logo {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    border-radius: 16px;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);

    img {
      width: 50px;
      height: 50px;
    }
  }

  .app-name {
    color: white;
    font-size: 28px;
    font-weight: 600;
    margin: 0;
  }
}

.form-section {
  background: white;
  border-radius: 16px;
  padding: 30px 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.captcha-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;

  .captcha-canvas {
    border: 1px solid #eee;
    border-radius: 4px;
    margin-bottom: 4px;
  }

  .refresh-tip {
    font-size: 12px;
    color: #969799;
  }
}

.login-btn-container {
  margin-top: 30px;
}

.other-login {
  margin-top: 40px;

  .divider {
    text-align: center;
    position: relative;
    margin-bottom: 20px;

    &::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 0;
      right: 0;
      height: 1px;
      background: #eee;
    }

    span {
      background: white;
      padding: 0 16px;
      color: #969799;
      font-size: 14px;
      position: relative;
      z-index: 1;
    }
  }

  .social-login {
    display: flex;
    justify-content: center;

    .social-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      cursor: pointer;
      padding: 12px;

      span {
        margin-top: 8px;
        font-size: 12px;
        color: #323233;
      }
    }
  }
}

.agreement {
  margin-top: 30px;
  text-align: center;

  .link {
    color: #1989fa;
  }
}
</style>
